<template>
  <div class="look-videos">
    <loading v-if="!videoData._id"></loading>
    <div v-else class="video-wrapper">
      <div class="left">
        <div class="label">
          <div class="name">{{videoData.video.label}}</div>
          <div class="num">
            <span class="star" @click="setVideoStar(videoData.videoUrl)">
              点赞：
              <i>{{videoData.star.length | setStar(flogNumber)}}</i>
            </span>
            <span>
              评论：
              <i>{{getCommentNumber}}</i>
            </span>
          </div>
        </div>
        <div class="player">
          <div id="J_prismPlayer" class="prism-player" ref="aliplayer" style="margin: 0 auto"></div>
        </div>
        <div class="comment">
          <div class="send-message">
            <send-message :userInfoData="userInfoData" @sendCommentData="sendCommentData" />
          </div>
          <ul v-if="videoComment.length">
            <li v-for="(comment,index) in videoComment" :key="comment._id">
              <div class="comment-show">
                <div class="cover">
                  <img :src="comment.sendUserCoverUrl | squareUrls" alt />
                </div>
                <span class="userName">{{comment.sendUserName}}</span>
                <span>评论时间：{{comment.created | setDate}}</span>
                <div class="btn">
                  <el-badge :value="comment.star | commentStarFilters(comment)" class="badge">
                    <el-button size="mini" @click="commentStar(comment.videoCommentId)">赞</el-button>
                  </el-badge>
                  <el-button class="return-omment" size="mini" @click="showReturnArea(index)">回复</el-button>
                </div>
              </div>
              <div class="comment-body">{{comment.videoCommentData}}</div>
              <div class="comment-wrapper" v-if="index === flog1 && flogBox1">
                <first-comment-box
                  :userInfoData="userInfoData"
                  :userName="userName"
                  @_sendReturnCommentData="_sendReturnCommentData"
                ></first-comment-box>
              </div>
              <div class="comment-child">
                <ul>
                  <li v-for="(returns,index2) in comment.child" :key="returns._id">
                    <div class="return-user">
                      <p>
                        {{returns.returnUserName}} 回复：
                        <strong>{{returns.userUserName}}</strong> 的
                        <i>{{returns.videoCommentData}}</i>
                      </p>
                      <div class="return-text">
                        <p>{{returns.returnText}}</p>
                      </div>
                    </div>
                    <div class="return-right">
                      <p>{{returns.updated | setDate}}</p>
                      <el-button size="mini" @click="showReturnArea2(index,index2)">回复</el-button>
                    </div>
                    <div
                      v-if="index2 === flog2 && index === flog1 && flogBox2"
                      class="second-wrapper"
                    >
                      <first-comment-box
                        :userInfoData="userInfoData"
                        :userName="userName"
                        @_sendReturnCommentData="_sendReturnCommentData2"
                      ></first-comment-box>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <div class="recomment-video">
          <div class="recomment-label">推荐视频库</div>
          <recomment-video />
        </div>
      </div>
      <div class="right">
        <user-info :userInfo="videoData.userInfo[0]"></user-info>
        <div class="this-video-data">
          <div class="label">{{videoData.video.label}}</div>
          <div class="date">
            <span>创建日期：{{videoData.created | setDate}}</span>
          </div>
          <div class="desc">{{videoData.video.body}}</div>
        </div>
        <div class="video-list">
          <h4>视频集：{{videoData.videos}}</h4>
          <ul>
            <li
              v-for="(data,index) in videoData.about"
              :key="data._id"
              @click="playThisVideo(data._id)"
              :class="data._id===id? 'active': ''"
            >
              <span>{{index + 1}}: {{data.video.label}}</span>
            </li>
          </ul>
        </div>
        <bei></bei>
      </div>
    </div>
  </div>
</template>

<script>
import recommentVideo from "@/views/blogs/navs/blog_video";
import firstCommentBox from "@/components/comment/firstCommentBox.vue";
import sendMessage from "@/components/comment/sendMessage";
import userInfo from "@/components/comment/newUserInfo.vue";
import { videoUrl } from "@/public/uri.js";
import { mapActions, mapState } from "Vuex";
export default {
  name: "look-videos",
  components: {
    "user-info": userInfo,
    "send-message": sendMessage,
    "first-comment-box": firstCommentBox,
    "recomment-video": recommentVideo
  },
  data() {
    return {
      id: "",
      flogNumber: 0,
      videoData: {},
      flog1: -1,
      flog2: -1,
      flogBox1: false,
      flogBox2: false,
      videoComment: []
    };
  },
  filters: {
    setStar(length, data) {
      return length + data;
    },
    commentStarFilters(data, comment) {
      let newData = [];
      for (let i = 0; i < data.length; i++) {
        if (data[i].commentId && comment.videoCommentId === data[i].commentId) {
          newData.push(data[i]);
        }
      }
      return newData.length;
    }
  },
  activated() {
    this.id = this.$route.params.id;
  },
  computed: {
    getCommentNumber() {
      let number = 0;
      let data = this.videoComment;
      for (let i = 0; i < data.length; i++) {
        number += data[i].child.length;
      }
      return number + data.length;
    },
    ...mapState("user", ["userInfoData", "userName"])
  },
  watch: {
    id() {
      if (this.id) {
        this.videoData = {};
        if (this.player) {
          this.player.dispose();
        }
        this.initMethods();
      }
    },
    $route(pre, now) {
      if (pre.name === "look_videos" && now.name === "look_videos") {
        this.id = this.$route.params.id;
      }
    }
  },
  methods: {
    setVideoStar(videoUrl) {
      let ip = returnCitySN.cip;
      this.setStar({
        id: videoUrl,
        ip,
        parentFlog: true
      })
        .then(res => {
          if (res.data.ok === 1) {
            this.flogNumber += 1;
            alert(res.data.data);
          } else {
            alert(res.data.data);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    commentStar(commentId) {
      // 点赞
      let ip = returnCitySN.cip;
      this.setStar({
        id: this.videoData._id,
        ip,
        commentId
      })
        .then(res => {
          this.getComment(this.videoData.videoUrl);
          alert(res.data.data);
        })
        .catch(err => {
          console.log(err);
        });
    },
    _sendReturnCommentData2(data) {
      //回复子组件的评论
      let returnUserName = this.videoComment[this.flog1].child[this.flog2]
        .returnUserName;
      let collections = {
        videoId: this.videoData._id,

        userUserName: returnUserName,
        videoCommentId: this.videoComment[this.flog1].child[this.flog2]
          .videoCommentId,
        videoCommentData: this.videoComment[this.flog1].child[this.flog2]
          .returnText,
        userCoverUrl: this.videoComment[this.flog1].child[this.flog2]
          .returnCoverUrl,

        returnText: data,
        returnUserName: this.userInfoData.userName,
        returnCoverUrl: this.userInfoData.coverUrl || ""
      };

      this.setVideoChildCommentData(collections)
        .then(res => {
          this.getComment(this.videoData.videoUrl);
          this._sendMessageToUser(data, returnUserName);
          alert(res.data.data);
        })
        .catch(err => {
          alert("错误提示：" + err);
        });
    },
    showReturnArea2(index, index2) {
      this.flog1 = index;
      this.flog2 = index2;
      this.flogBox1 = false;
      this.flogBox2 = true;
    },
    showReturnArea(index) {
      this.flog1 = index;
      this.flogBox1 = true;
      this.flogBox2 = false;
    },
    _sendMessageToUser(skillCommentData, data) {
      if (this.userName) {
        let collections = {
          text: skillCommentData,
          sendUserName: this.userInfoData.userName || this.userName,
          userName: data,
          sendCoverUrl: this.userInfoData.coverUrl || "",
          system: true,
          id: this.videoData._id,
          label: this.videoData.label,
          type: this.$route.path.split("/")[1]
        };
        this.sendMessageToUser(collections)
          .then(res => {
            console.log("ok");
          })
          .catch(err => {
            console.log("错误信息：" + err);
          });
      } else {
        alert("你还未登录，无法给作者留言！");
      }
    },
    _sendReturnCommentData(data) {
      let collections = {
        videoId: this.videoData._id,

        userUserName: this.videoComment[this.flog1].sendUserName,
        videoCommentId: this.videoComment[this.flog1].videoCommentId,
        videoCommentData: this.videoComment[this.flog1].videoCommentData,
        userCoverUrl: this.videoComment[this.flog1].sendUserCoverUrl,

        returnText: data,
        returnUserName: this.userInfoData.userName,
        returnCoverUrl: this.userInfoData.coverUrl || ""
      };

      this.setVideoChildCommentData(collections)
        .then(res => {
          this.getComment(this.videoData.videoUrl);
          this._sendMessageToUser(
            data,
            this.videoComment[this.flog1].sendUserName
          );
          alert(res.data.data);
        })
        .catch(err => {
          alert("错误提示：" + err);
        });
    },
    playThisVideo(id) {
      this.$router.push("/look_videos/" + id);
    },
    sendCommentData(data) {
      let collections = {
        videoId: this.videoData.videoUrl,
        videoUserName: this.videoData.userInfo[0].userName,
        videoCommentData: data,
        sendUserName: this.userInfoData.userName,
        sendUserCoverUrl: this.userInfoData.coverUrl || ""
      };
      this.setVideoCommentData(collections)
        .then(res => {
          if (res.data.ok === 1) {
            this.getComment(this.videoData.videoUrl);
            this._sendMessageToUser(data, this.videoData.userInfo[0].userName);
            alert(res.data.data);
          } else {
            res.data.data;
          }
        })
        .catch(err => {
          alert("错误提示：" + err);
        });
    },
    getComment(id) {
      this.getThisVideoCommentData({ videoId: id })
        .then(res => {
          this.videoComment = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    initMethods() {
      this.getThisVideoData({
        id: this.id
      })
        .then(res => {
          this.videoData = res.data.data;
          this.getComment(res.data.data.videoUrl);
          this.$nextTick(() => {
            this.player = new Aliplayer(
              {
                id: "J_prismPlayer", // 容器id
                //   source:'{"HD":"http://common.qupai.me/player/qupai.mp4","SD":"http://common.qupai.me/player/qupai.mp4"}'
                source: `${videoUrl}/${res.data.data.videoUrl}`, // 视频url
                width: "100%", // 播放器宽度
                height: "100%", // 播放器高度
                loadDataTimeout: "10" // 播放器的缓冲时间提示
              },
              function(player) {
                console.log("播放器创建了");
              }
            );
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    ...mapActions("user", [
      "getThisVideoData",
      "setVideoCommentData",
      "getThisVideoCommentData",
      "sendMessageToUser",
      "setStar",
      "setVideoChildCommentData"
    ])
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
@keyframes active
  0%
    transform: scale(1,1) 
  80%
    transform: scale(1.2,1.2)
  85%
    transform: scale(1,1)
  90%
    transform: scale(1.2,1.2)
  95%
    transform: scale(1,1) 
.look-videos
  width: 100%
  .video-wrapper
    width: 1280px
    margin: 0 auto 
    @include flex(space-between,flex-start)
    .left
      flex: 0 0 68%
      width: 68%
      background-color: #fff
      overflow: hidden
      >div
        padding: 0 20px
      .label
        width: 100%
        height: 60px
        line-height: 60px
        border-bottom: 10px solid #eee
        @include flex(space-between,center)
        .name
          font-size: 18px
          color: #333
          font-weight: 700
        .num
          .star
            cursor: pointer
          >span
            margin-left: 15px
            >i
              color: #eb2001
      .player
        width: 100%
        height: 500px
        margin-top: 10px
      .comment
        width: 100%
        >ul
          width: 100%
          >li
            width: 100%
            padding: 20px 10px
            border-bottom: 5px dotted #eee
            overflow: hidden
            .comment-show
              width: 100%
              height: 32px
              position: relative
              @include flex(flex-start,center)
              .cover
                flex: 0 0 32px
                height: 100%
                overflow: hidden
                border-radius: 5px
                @include flex(center,center)
                img
                  width: 100%
                  height: auto
              span
                margin-left: 20px
              .userName
                color: #000
                font-weight: 700
              .z-index
                position: absolute
                right: 160px
                width: 60px
                height: 100%
                color: #aaa
                @include flex(center,center)
              .btn
                position: absolute 
                right: 0
                @include flex(center,center)
                .badge
                  margin-right: 30px
            .comment-body
              margin-top: 5px
              line-height: 20px
              min-height: 40px
              padding: 0 52px
            .comment-child
              >ul
                width: 100%
                padding: 10px
                >li
                  border: 1px solid #f0f0f0
                  padding: 20px
                  overflow: hidden
                  margin-bottom: 5px
                  flex-wrap: wrap
                  @include flex(flex-start,flex-start)            
                  .return-user
                    flex: 0 0 80%
                    overflow: hidden
                    >p
                      width: 100%
                      height: 25px
                      overflow: hidden
                      text-overflow: ellipsis
                      white-space: nowrap
                      >i
                        color: #999                  
                    >.return-text
                      width: 100%
                      line-height: 25px
                      color: #0487dc
                      padding: 0 10px
                  .return-right
                    flex: 1
                    text-align: right
                    >p
                      height: 25px  
                  .second-wrapper            
                    flex: 0 0 100%  
      .recomment-video
        width: 100%
        height: 100%
        margin-top: 10px
        .recomment-label
          width: 100%
          height: 40px
          line-height: 40px
          font-size: 16px
          font-weight: 700 
          background-color: #fff
          padding-left: 10px
          @include title-before(5px,16px,12px,0px,#eb2001)    
    .right
      flex: 0 0 30%
      width: 30%
      overflow: hidden
      .this-video-data
        width: 100%
        margin-top: 10px
        background-color: #fff
        padding: 20px
        .label
          width: 100%
          height: 40px
          line-height: 40px
          font-weight: 700
          font-size: 16px
          color: #333
        .date
          width: 100%
          height: 30px
          overflow: hidden
          line-height: 30px
        .desc
          width: 100%
          padding: 5px 0
          height: 20px
          line-height: 20px
          color: #999
      .video-list
        margin-top: 10px
        width: 100%
        background-color: #fff
        padding: 20px
        h4
          width: 100%
          line-height: 40px
          height: 40px
          overflow: hidden
        >ul
          width: 100%
          >li
            width: 100%
            height: 30px
            line-height: 30px
            overflow: hidden
            border-bottom: 1px solid #eee
            padding: 0 20px
            cursor: pointer
            &:hover
              color: #eb2001
            &:last-child
              border: none
          .active
            >span
              display: block
              transform-origin: 20% 20%
              animation: active 10s linear infinite
</style>